<template>
    <view class="content" style="overflow: hidden">
        <view class="slider-container" :style="{ backgroundColor: sliderBlockBg, touchAction: 'none' }">
            <view class="initText" style="height: 100%; font-size: 26rpx; text-align: center; line-height: 90rpx">
                {{ value == 100 ? successText : initText }}
            </view>
            <view class="front" :style="{ width: value + '%', backgroundColor: forntBg }"> </view>
            <view
                class="slider-block"
                :style="{ left: !value ? '0' : getLeft(value), width: sliderBlockWidth - 10 + 'rpx' }">
                <image class="slider_btn" src="@/pages_tms/static/icon/icon_slider_btn_bg.png"></image>
            </view>
            <slider
                v-if="!refresh"
                :value="value"
                @change="sliderChange"
                :disabled="disabled"
                activeColor="transparent"
                @changing="changing"
                block-color="transparent"
                :block-size="35"
                backgroundColor="transparent"
                style="position: absolute; top: 6rpx; left: 0; z-index: 5; width: 88%" />
        </view>
    </view>
</template>

<script>
export default {
    props: {
        initText: {
            type: String,
            default: "右滑验证", //未滑动的验证文案
        },
        successText: {
            type: String,
            default: "验证成功", //验证成功文案
        },
        sliderBlockBg: {
            //
            type: String,
            default: "#dae2d0", //滑块颜色
        },
        forntBg: {
            type: String,
            default: "green", //滑块滑动后的颜色
        },
        sliderBlockWidth: {
            type: Number, //单位rpx 最大80
            default: 100,
        },
        reset: {
            type: Boolean, //成功后重置
            default: true,
        },
    },
    data() {
        return {
            value: 0,
            disabled: false,
            refresh: false,
        }
    },
    onLoad() {},
    methods: {
        getLeft(value) {
            return "calc(" + value + "% - " + this.sliderBlockWidth + "rpx)"
        },
        changing(e) {
            this.value = e.detail.value
        },
        sliderChange(e) {
            if (e.detail.value != 100) {
                this.value = e.detail.value
                this.$nextTick(() => {
                    this.value = 0
                })
            }
            if (e.detail.value == 100) {
                this.value = 100
                this.$emit("success") //验证成功触发组件通知
                if (!this.reset) {
                    this.disabled = true
                    return
                }

                setTimeout(() => {
                    this.value = 0
                }, 1000)
            }
        },
        resetFn() {
            this.refresh = true
            this.$nextTick(() => {
                this.value = 0
                this.disabled = false
                this.refresh = false
                this.$forceUpdate()
            })
        },
    },
}
</script>

<style lang="scss">
.slider-container {
    position: relative;
    height: 100rpx;
    border-radius: 8rpx;
    overflow: hidden;
    width: 100%;
    /deep/.uni-slider-thumb {
        box-shadow: none;
    }
    .slider-block {
        height: 90rpx;
        position: absolute;
        left: 0;
        top: 5rpx;
        margin-left: 5rpx;
        color: #ffffff;
        font-size: 36rpx;
        // border-right: 1px solid #6B768C;
        // background-color: #74B8FF;
        max-width: 90rpx;
        // border-radius: 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .slider_btn {
            width: 90rpx;
            height: 90rpx;
        }
    }
    .front {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.8;
    }
    .initText {
        color: #ffffff;
    }
}
</style>
